<template>
	<view class="bg-white">
		<view class="cu-custom" @tap="show = true" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed bg-gradual-blue" :style="style">
				<view class="content" :style="[{top:StatusBar + 'px'}]" v-if="company.length > 0">
					<template v-if="companyChange.length > 0">{{companyChange.name}}</template>
					<template v-else>{{company[0].name}}</template>
					<text class="cuIcon-triangledownfill"></text>
				</view>
			</view>
		</view>
		<!-- 只能有一个根元素 -->
		<view class="sticky" style="z-index: 99;">
			<u-dropdown ref="uDropdown" borderBottom>
				<u-dropdown-item class="bg-white" title="搜索" :options="options1">
					<view class="slot-content bg-white padding">
						<u-search placeholder="请输入搜索关键词" focus v-model="keyword" @custom="submit()"></u-search>
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-model="categoryinput" title="全部" :options="category"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="筛选">
					<view @click="closeDropdown" style="width: 20%;float: left;"></view>
					<scroll-view scroll-y="true" style="width: 80%;float: right;" class="bg-white">
						<view class="slot-content padding-sm">
							<view class="text-xl text-bold text-black padding-xs">
								按状态
							</view>
							<view class="grid col-2">
								<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
									<button class="cu-btn lg block" :class="item.checked ? 'bg-grey':'line-grey'"
										@tap="ChooseCheckbox" :data-value="item.value"> {{item.name}}
									</button>
								</view>
							</view>
							<view class="text-xl text-bold text-black padding-xs margin-top-xs">
								按时间
							</view>
							<view class="grid col-2">
								<view v-for="(item,index) in checkboxtime" class="padding-xs" :key="index">
									<button class="cu-btn lg block" :class="item.checked ? 'bg-grey':'line-grey'"
										@tap="ChooseCheckboxTime" :data-value="item.value"> {{item.name}}
									</button>
								</view>
							</view>
							<u-row gutter="5" style="margin: 5rpx;">
								<u-col span="6">
									<picker mode="date" :value="starttime" @change="starttimeChange">
										<view class="picker text-center bg-gray"
											style="height: 80rpx;line-height: 80rpx;">
											{{starttime ? starttime : '开始时间'}}
										</view>
									</picker>
								</u-col>
								<u-col span="6">
									<picker mode="date" :value="endtime" @change="endtimeChange">
										<view class="picker text-center bg-gray"
											style="height: 80rpx;line-height: 80rpx;">
											{{endtime ? endtime : '结束时间'}}
										</view>
									</picker>
								</u-col>
							</u-row>
						</view>
						<view class="cu-bar bg-white tabbar border shop" style="width: 100%;height: 9vh;float: right;">
							<view class="bg-grey submit margin-left-xs" @click="init('resut')">重置</view>
							<view class="bg-blue submit margin-right-xs" @click="submit">确定</view>
						</view>
					</scroll-view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="padding-lr-sm" style="position: relative;top: 1rpx;z-index: 0;">
			<block v-for="(item,index) in list" :key="index">
				<view class="bg-gray radius margin-top padding-tb-sm" @click="contractsignurl(item.id)">			
						<view class="cu-tag bg-blue radius" style="float: right;margin-top: -20rpx;">{{item.status}}
						</view>
					<view class="" style="width:95%;">
						
						<view class="cu-timeline" style="background-color: unset;">
							<view class="cu-item cuIcon-moneybag text-left" style="padding: 4rpx 20rpx 0rpx 70rpx;">
								<text class="text-xxl text-bold">{{item.subject}}</text>
							</view>
							<view class="cu-item text-left text-grey cuIcon-file"
								style="padding: 20rpx 20rpx 0rpx 70rpx;"> 
								发件方：{{item.json.tenantName}}
							</view>
							<view class="cu-item text-left text-grey cuIcon-countdown"
								style="padding: 20rpx 20rpx 0rpx 70rpx;">
								签发日期：{{item.createTime}}
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white shadow foot">
			<navigator open-type="switchTab" class="action" url="/pages/index/index">
				<view class='cuIcon-homefill'></view>
				<view>首页</view>
			</navigator>
			<navigator open-type="switchTab" url="/pages/member/file" class="action text-blue">
				<view class='cuIcon-file'></view>
				<view>文件</view>
			</navigator>
			<navigator url="/pages/member/index" class="action">
				<view class='cuIcon-people'></view>
				<view :class="PageCur=='plugin'?'text-green':''">我的</view>
			</navigator>
		</view>
		<view class="cu-modal bottom-modal" v-if="modalName" :class="modalName=='bottomModal'?'show':''"
			@tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding">
					<button class="cu-btn block line-blue margin-tb-sm lg" @click="hetong('liulan')">浏览合同</button>
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="hetong('qianshu')">签署合同</button>
					<button open-type="share" class="cu-btn block line-red margin-tb-sm lg">转发合同</button>
				</view>
			</view>
		</view>
		<u-popup v-if="show" v-model="show" mode="top" length="auto">
			<view class="cu-bar bg-white solids-bottom" style="margin-top: 105rpx;">
				<view class="action" @click="hideModal">
					<text class="cuIcon-close"></text>
				</view>
				<view class="content text-bold">
					我的企业
				</view>
			</view>
			<view class="padding-xs bg-white" style="text-align: left;">
				<view class="cu-list menu">
					<block v-for="(item,index) in company" :key="index">
						<view class="cu-item arrow" @click="companyChange = item,submit()">
							<view class="content" style="width: 100%;">
								<view class="text-black text-bold">{{item.name}}
									<text class='cu-tag sm bg-blue radius'
										v-if="item.status.result == 'PASSED'">认证成功</text>
									<text class='cu-tag sm bg-red radius' v-else>认证失败</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="padding">
				<navigator url="/pages/company/create" class="cu-btn block bg-blue margin-tb-sm lg">添加新企业</navigator>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				show: false,
				list: [],
				keyword: '',
				value1: '',
				value2: '',
				categoryinput: '',
				starttime: '',
				endtime: '',
				checkboxtime: [{
					value: 1,
					name: '近一个月',
					checked: false,
				}, {
					value: 2,
					name: '近三个月',
					checked: false,
				}, {
					value: 3,
					name: '一年内',
					checked: false,
				}, ],
				checkbox: [],
				category: [],
				company: [],
				companyChange: {},
				modalName: '',
				curid: '',
				user: {},
				page: 1
			}
		},
		onLoad(e) {
			that = this
			that.$u.post('index/member').then(res => {
				that.user = res
			})
			that.$u.post('index/company').then(res => {
				that.company = res
			})
			that.$u.post('qiyue/contractstatus').then(res => {
				that.checkbox = res
			})
			that.$u.post('qiyue/categorylist').then(res => {
				that.category = res
			})
			that.init()
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		watch: {
			categoryinput(val) {
				this.submit()
			},
			starttime(val) {
				if (val) {
					this.value1 = ''
					let items = this.checkboxtime;
					for (let i = 0, lenI = items.length; i < lenI; ++i) {
						items[i].checked = false;
					}
				}
			}
		},
		onReachBottom() {
			++that.page
			that.init()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: that.user.name + '发您一个合同需要签署',
				path: '/pages/index/index?hetongid=' + this.curid
			}
		},
		methods: {
			hideModal(e) {
				this.modalName = null
			},
			hetong(e) {
				let id = this.curid
				if (e == 'liulan') {
					that.$u.post('qiyue/contractsignurl', {
						id: id,
						'page': 'viewurl'
					}).then(res => {
						if (res.code !== 0) {
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: "none"
							});
							return false
						}
						uni.navigateTo({
							url: '/pages/center/index?url=' + encodeURIComponent(JSON
								.stringify(res.viewUrl))
						})
					})
				} else {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							let url = 'https://sigh.qdhansen.com/contractdetail/' + id +
								'?code=' + loginRes.code
							uni.navigateTo({
								url: '/pages/center/index?url=' +
									encodeURIComponent(JSON.stringify(url))
							})
						}
					})
				}
			},
			contractsignurl(e) {
				this.modalName = 'bottomModal'
				this.curid = e
			},
			init(e) {
				if (e == 'resut') {
					that.page = 1
					this.value1 = ''
					this.value2 = ''
					this.keyword = ''
				}
				that.$u.post('qiyue/contractlist', {
					page: that.page
				}).then(res => {
					if (res.length < 1) {
						uni.showToast({
							title: '没有更多了',
							icon: "none"
						})
						return false
					}
					if (e == 'resut') {
						that.form = {}
						this.starttime = null
						this.endtime = null
						that.list = res
					}else{						
						that.list = that.list.concat(res)
					}
					this.$refs.uDropdown.close();
					let items = this.checkboxtime;
					for (let i = 0, lenI = items.length; i < lenI; ++i) {
						items[i].checked = false;
					}
					let itemss = this.checkbox;
					for (let i = 0, lenI = itemss.length; i < lenI; ++i) {
						itemss[i].checked = false;
					}
				})
			},
			starttimeChange(e) {
				this.starttime = e.detail.value
			},
			endtimeChange(e) {
				this.endtime = e.detail.value
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			submit() {
				let param = {}
				if (this.value2) {
					param.status = this.value2
				}
				if (this.keyword) {
					param.keyword = this.keyword
				}
				if (this.value1) {
					param.date = this.value1
				}
				if (this.categoryinput) {
					param.categoryinput = this.categoryinput
				}
				if (this.companyChange) {
					param.name = this.companyChange.name
				}
				if (this.starttime || this.endtime) {
					if (!this.starttime) {
						uni.showToast({
							title: '请选择开始时间',
							duration: 2000,
							icon: "none"
						});
						return false
					}
					if (!this.endtime) {
						uni.showToast({
							title: '请选择结束时间',
							duration: 2000,
							icon: "none"
						});
						return false
					}
					param.starttime = this.starttime
					param.endtime = this.endtime
				}
				that.$u.post('qiyue/contractlist', param).then(res => {
					that.list = res
					this.$refs.uDropdown.close();
					this.show = false
				})
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = true;
						this.value2 = values
					} else {
						items[i].checked = false;
					}
				}
			},
			ChooseCheckboxTime(e) {
				let items = this.checkboxtime;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = true;
						this.value1 = values
					} else {
						items[i].checked = false;
					}
				}
				this.starttime = null
				this.endtime = null
			}
		}
	}
</script>

<style scoped>
	.sticky {
		background: #FFFFFF;
		position: sticky;
		top: 120rpx;
	}

	.sticky>.u-dropdown__menu__item {
		background: #FFFFFF;
	}

	.cu-timeline>.cu-item::before {
		font-family: "cuIcon";
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		background-color: unset;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 11rpx;
		left: 14rpx;
	}

	.cu-timeline>.cu-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #ddd;
		left: 39rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}
</style>
